<template>
  <nav class="navbar">
    <ul>
      <nuxt-link
        to="/"
        class="ml-[18px] mr-auto items-center flex flex-col justify-center"
      >
        <nuxt-img src="/svg/logo.svg" alt="Logo" class="h-[40px]" />
      </nuxt-link>
      <li :class="{ active: isActive('/') }">
        <nuxt-link to="/" class="tab">幻引首页</nuxt-link>
        <div class="indicator" v-if="isActive('/')"></div>
      </li>
      <li :class="{ active: isActive('/ai-robot') }">
        <nuxt-link to="/ai-robot" class="tab">AI小助手</nuxt-link>
        <div class="indicator" v-if="isActive('/ai-robot')"></div>
      </li>
      <li :class="{ active: isActive('/news') }">
        <nuxt-link to="/news" class="tab">新闻资讯</nuxt-link>
        <div class="indicator" v-if="isActive('/news')"></div>
      </li>
    </ul>
  </nav>
</template>

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
const isActive = (section) => {
  return route.path === section
}
</script>

<style lang="scss" scoped>
.navbar {
  min-width: 1200px;
  min-height: 70px;
  background-color: white;
  overflow: hidden;
  position: fixed;
  top: 50px;
  padding: 0 16px;
  width: 1200px;
  height: 70px;
  z-index: 1000;
  border-radius: 100px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // 添加浅阴影
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.navbar li {
  position: relative;
  min-width: 112px;
}

.navbar .tab {
  display: block;
  color: rgb(125, 125, 125);
  text-align: center;
  padding: 0 20px;
  font-size: 16px;
  height: 70px;
  line-height: 70px;
  text-decoration: none;
  gap: 40;
}

.navbar a:hover {
  background-color: #f7f7f7;
  color: rgb(25, 85, 247);
}

.indicator {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 35px;
  height: 3px;
  border-radius: 4px;
  background: linear-gradient(
    270deg,
    rgb(255, 255, 255) 4.327%,
    rgb(25, 85, 247) 92.788%
  );
}

.active .tab {
  color: #2E2D2E !important;
  font-size: 18px;
  font-weight: 680;
}
</style>
